import { Dict } from "@/utils/cacheUtil";
import { PropType } from "vue";

export default defineComponent({
	props: {
		modelValue: [String, Boolean, Number, Array],
		multiple: Boolean,
		dataList: {
			type: Array as PropType<Dict[]>,
			default() {
				return [];
			}
		}
	},
	emits: ["update:modelValue"],
	setup(props, { emit }) {
		const change = (dict: Dict) => {
			let exist = typeof props.modelValue == "object" ? props.modelValue?.includes(dict.key) : props.modelValue == dict.key;
			let val;
			if (props.multiple) {
				val = props.modelValue as Array<String>;
				if (exist) {
					val.splice(val.indexOf(dict.key), 1);
				} else {
					val.push(dict.key);
				}
			} else {
				val = exist ? null : dict.key;
				emit("update:modelValue", val);
			}
		};
		return () => {
			return (
				<div class="search-type-list flex flex-wrap">
					{props.dataList.map(item => {
						return (
							<div
								onClick={() => change(item)}
								class={[
									"type-item",
									(typeof props.modelValue == "object" ? props.modelValue?.includes(item.key) : props.modelValue == item.key)
										? "type-item-active"
										: ""
								]}
							>
								{item.label}
							</div>
						);
					})}
				</div>
			);
		};
	}
});
